import { defineConfig, loadEnv } from 'vite'
import type { ConfigEnv, UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd())
  console.log('当前环境变量：', env)
  console.log('当前环境变量2：', env.VITE_PORT)
  
  // 端口配置
  // const port = env.port || env.npm_config_port || 8080; // 端口
   let port = Number(env.VITE_PORT || env.npm_config_port)


  console.log(`使用可用端口: ${port}`)

  return {
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/mixins" as *;`
      }
    }
  },
  server: {
    host: true, // 监听所有地址，包括 LAN 和公共地址
    port: port, // 使用动态端口
    strictPort: false, // 端口被占用时自动尝试下一个可用端口
    proxy: {
      '/api': {
        target: env.VITE_API_BASE_URL,
        changeOrigin: true,
        rewrite: (path: string) => path.replace(/^\/api/, '')
      }
    },
    // hmr: true // 启用最基本的 HMR 功能
    hmr: {
      overlay: true,// 当编译出错时，会在浏览器窗口全屏输出错误
      // clientPort: port,// WebSocket 客户端端口使用相同的动态端口
      // host: 'localhost',
      timeout: 60000,// 增加超时时间到60秒，处理较慢的更新
      // log: mode === 'development',// 在开发环境下启用HMR日志
      protocol: 'ws',// 使用WebSocket协议
      // reconnect属性不是标准HmrOptions类型的一部分
      path: '/hmr'
    }
  }
  }
})